<template>
    <div class="se">
        <header>
            <Searchs :isContentShow="isContentShow"></Searchs>
        </header>
         <section>
              <div class="shops">
                   <div class="shopLeft">
                        <div class="left">
                             <ul>
                               <li 
                                v-for="(item,index) in searchsList" 
                                :key="index"
                                @click="clickList(index)"
                                :class="{active:index===scrollIndex}"
                                ref="menuLeft" 
                                >
                                  {{item.name}}
                               </li>
                            </ul>
                        </div>
                   </div>
                   <div class="shopRight" ref="shopRight">
                        <div class="right">
                             <ul class="uls" ref="uls">
                                <li 
                                v-for="(item,index) in searchsList" 
                                :key="index"
                                class="rightLis" >
                                    <h3>
                                        <span>{{item.name}}</span>
                                        <span>查看更多</span>
                                   </h3>
                                   <div class="lis1">
                                      <div v-for="(val,key) in item.items" :key="key">
                                         <img :src="val.icon" alt="">
                                         <p>{{val.title}}</p>
                                      </div>
                                   </div>
                                </li>
                             </ul>
                        </div>
                   </div>
              </div>
         </section>

          <SearchContent 
			v-if='isContent'
			:isContentShow='isContentShow'
		></SearchContent>
        
        <footer>
            <FooterBar></FooterBar>
        </footer>
    </div>
</template>
<script>
import FooterBar from "@/components/footerBar";
import Searchs from "@/components/searchs";
import SearchContent from "@/components/searchContent";
import {mapState,mapActions} from "vuex";
import BScroll from "better-scroll";
export default {
    name:"Search",
    props:{

    },
    components:{
        FooterBar,
        Searchs,
        SearchContent
    },
    data(){
        return {
            rightTops:[], //右侧区块 距离 顶部的高度
            scrollY:0,//右侧滚动距离值
            rightScroll:'',//右侧滚动
            leftScroll:'', //左侧滚动
            isContent:false
        }
    },
    computed:{
        ...mapState(['searchsList']),
        scrollIndex(){  //添加动态类
            return this.rightTops.findIndex((item,index)=>{
                 this._initLeftScroll(index);
                 return this.scrollY >= item && this.scrollY < this.rightTops[index+1]
            })
        }
    },
    methods:{

      ...mapActions(['getSearchsListFn']),

      clickList(ind){ //点击左边 右边滚动
            this.scrollY=this.rightTops[ind];
            //console.log(this.rightTops[ind])
            this.rightScroll.scrollTo(0,-this.scrollY,200)
            //console.log(this.$refs.shopRight)
      },
    
      //左右联动
      _initLeftScroll(ind){
        let menus=this.$refs.menuLeft;
        let el=menus[ind];
        this.leftScroll.scrollToElement(el,300,0,-300);
      },

      isContentShow(flag){
          this.isContent=flag;
      }
    },
    created(){
         this.$nextTick(()=>{
              this.getSearchsListFn()
         })
    },
    mounted(){
         this.leftScroll=new BScroll(".shopLeft",{
             click:true,
             probeType:2
         });
         this.rightScroll=new BScroll(".shopRight",{
             click:true,
             probeType:2
         })
    },
    watch:{
        //更新dom
        searchsList(){
            let top=0;
            let scrollTop=[];
            scrollTop.push(top);
            this.$nextTick(()=>{
                 let uls=Array.from(this.$refs.uls.getElementsByClassName("rightLis"));
                 uls.forEach((item,index)=>{
                      top+=item.clientHeight;
                      //console.log(item.clientHeight)
                      scrollTop.push(top);
                 })
                 this.rightTops=scrollTop;
                 this.rightScroll.on("scroll",(pops)=>{
                       this.scrollY=Math.abs(pops.y)
                  })
            })
        }
    }
}
</script>
<style scoped lang="scss">
@import "~@/scss/common.scss";
.se{
    width:100%;
    height:100%;
    display:flex;
    flex-direction:column;
    header{
        width:100%;
        height:pxTorem(44px);
    }
    section{
        flex:1;
        overflow-y:scroll;
        &::-webkit-scrollbar{
            display:none;
        }
        .shops{
            width:100%;
            display:flex;
            position: relative;
            height:100%;
            .shopLeft{
               width:pxTorem(90px);
               background:#eee;
               position: absolute;
               top:0;
               left:0;
               height:100%;
               overflow: hidden;
               text-align: center; 
               .left{
                   width:100%;
                   ul{
                       width:100%;
                       li{
                           width:100%;
                           height:pxTorem(50px);
                           font-size:pxTorem(14px);
                           line-height:pxTorem(50px);
                           border-bottom:1px solid #ccc;
                           &.active{
                               color:red;
                               background:#fff;
                           }
                            &.active::before{
                              content: "";
                              position:absolute;
                              left:0;
                              width:pxTorem(1.7px);
                              height:pxTorem(37px);
                              background:red;
                           }
                       }
                   }
               }
            }
            .shopRight{
                width:pxTorem(280px);
                margin-left:pxTorem(4px);
                position: absolute;
                top:0;
                right:0;
                height:100%;
                overflow: hidden; 
               .right{
                  width:pxTorem(280px);
                    ul{
                       width:pxTorem(280px);
                       li{
                           width:pxTorem(280px);
                           height:auto;
                           font-size:pxTorem(14px);
                           margin-top:pxTorem(7px);
                          h3{
                            width:pxTorem(280px);
                            height:pxTorem(40px);
                            display:flex;
                            justify-content:space-between;
                            padding:0 pxTorem(4px);
                            align-items:center;
                            span{
                                font-size:pxTorem(16px);
                            }
                         }
                         .lis1{
                             width:pxTorem(280px);
                             height:auto;
                             display:flex;
                             justify-content:space-around;
                             align-items:center;
                             flex-wrap:wrap;
                             div{
                                 width:33%;
                                 height:100%;
                                 text-align: center;
                                 padding:4px 0;
                                 img{
                                 width:pxTorem(56px);
                                 height:pxTorem(56px);
                                }
                                p{
                                    font-size:pxTorem(14px);
                                }
                             }
                         }
                       }
                   }
               }
            }
        }
    }
    footer{
       width:100%;
       height:pxTorem(50px);
    }
}
</style>